<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="icon" th:href="@{~/fileup/image/common/deep_pro.ico}" type="image/x-icon" />
    <!-- bootstrap theme -->
    <link rel="stylesheet" type="text/css" th:href="@{~/fileup/plugin/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{~/fileup/plugin/css/button.css}">
    <script th:src="@{~/fileup/plugin/js/jquery-3.1.1.min.js}" type="text/javascript"></script>
    <!-- bootstrap main js -->
    <script type="text/javascript" th:src="@{~/fileup/plugin/js/bootstrap.min.js}"></script>

    <title>语音识别</title>
</head>
<body>
<div class="container">
    <h3>语音识别</h3>
    <form enctype="multipart/form-data" id="sound-form" action="/voiceRecognition" method="post">
        <audio controls autoplay></audio>
        <input class="btn btn-success" onclick="startRecording()" type="button" value="录音" />
        <input class="btn btn-warning" onclick="stopRecording()" type="button" value="停止" />
        <input class="btn btn-info" onclick="playRecording()" type="button" value="播放" />
        <input class="button button-royal button-pill" onclick="uploadAudio()" type="button" value="提交" />
    </form>
</div>
<script type="text/javascript" th:src="@{~/fileup/js/HZRecorder.js}"></script>
<script>
    var recorder;
    var audio = document.querySelector('audio');
    function startRecording() {
        HZRecorder.get(function (rec) {
            recorder = rec;
            recorder.start();
        });
    }

    function stopRecording() {
        recorder.stop();
    }

    function playRecording() {
        recorder.play(audio);
    }

    function uploadAudio() {
        recorder.upload("/voiceRecognition", function (state, e) {
            switch (state) {
                case 'uploading':
                    // var percentComplete = Math.round(e.loaded * 100 / e.total) + '%';
                    break;
                case 'ok':
                    console.log(e.target.responseText);
                    alert("上传成功");
                    break;
                case 'error':
                    alert("上传失败");
                    break;
                case 'cancel':
                    alert("上传被取消");
                    break;
            }
        });
    }

</script>
</body>
</html>